<template>
  <div>
    <div class="loading-box" v-if="isLoading">
      <loading></loading>
    </div>
    <div class="detail" v-else>
      <div class="ad-info">
        <div class="ad-head">
          <div class="ad-image">
            <img :src="data.image"/>
          </div>
          <div class="ad-head-content">
            <div class="ad-head-content-title">
              {{data.title}}
            </div>
            <div class="ad-head-content-success">
              {{data.succeed_loans}}人成功贷款
            </div>
            <div class="ad-head-content-ascendancy">
              {{ascendancy}}
            </div>
          </div>
          <div class="ad-credit" v-if="data.ad_tag != ''"></div>
        </div>
        <div class="ad-footer">
          <div>
            <div class="ad-footer-icon"><img src="~@/assets/img/detail_icon1.png"/></div>
            <div class="ad-footer-title">最高可贷</div>
            <div class="ad-footer-content blue">{{data.max_credit}}</div>
          </div>
          <div>
            <div class="ad-footer-icon"><img src="~@/assets/img/detail_icon2.png"/></div>
            <div class="ad-footer-title">{{data.time_span === 0 ? '月利率' : '日利率'}}</div>
            <div class="ad-footer-content red">{{data.expense_monthly}}</div>
          </div>
          <div>
            <div class="ad-footer-icon"><img src="~@/assets/img/detail_icon3.png"/></div>
            <div class="ad-footer-title">贷款期限</div>
            <div class="ad-footer-content green">{{data.min_audit === data.max_audit ? data.max_audit : `${data.min_audit}-${data.max_audit}`}}天</div>
          </div>
          <div>
            <div class="ad-footer-icon"><img src="~@/assets/img/detail_icon4.png"/></div>
            <div class="ad-footer-title">放款时间</div>
            <div class="ad-footer-content yellow">{{data.lending_time}}</div>
          </div>
        </div>
      </div>
      <div class="banner" v-if="false">
        <img src="~@/assets/img/banner.png"/>
      </div>
      <div class="ad-desc">
        <div class="ad-desc-item" v-for="desc in descs">
          <div class="ad-desc-item-title">{{desc.title}}</div>
          <div class="ad-desc-item-content" v-for="content in desc.content">{{content}}</div>
        </div>
      </div>
      <div class="button-box">
        <button class="button is-big" @click="toAd">申请贷款</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'detail',
  created () {
    this.isLoading = true
    this.$api.get(`ads/detail/app_store_id/${this.$route.params.id}`).then(req => {
      this.data = req.data
      this.isLoading = false
      // 统计进入查看详情页的信息
      // google统计
      window.ga && window.ga('send', 'event', this.appname, '查看', req.data.title)
      // 百度统计
      // window._hmt && window._hmt.push(['_trackEvent', this.appname, '查看', req.data.title])
    })
  },
  computed: {
    ...mapGetters({
      info: 'global/info',
      appname: 'global/appname',
      isIos: 'isIos'
    }),
    ascendancy () {
      if (!this.data.desc || this.data.desc.length < 1) return ''
      return this.data.desc[0].content[0]
    },
    credit_line () {
      if (!this.data.credit_line) return ''
      let creditLine = this.data.credit_line.split('-')
      return creditLine[creditLine.length - 1]
    },
    descs () {
      if (!this.data.desc || this.data.desc.length < 1) return []
      let desc = this.data.desc.filter(item => item.title !== '产品优势' && item.title !== '所需授权')
      return desc
    }
  },
  data () {
    return {
      isLoading: false,
      data: {}
    }
  },
  methods: {
    toAd () {
      // 统计进入广告页的信息
      // google统计
      window.ga && window.ga('send', 'event', this.appname, '申请', this.data.title)
      window.ga && window.ga('send', 'event', this.appname, '申请', '活人')
      if (this.info.source_app.indexOf('com.') > -1) { // 临时修改 这个包直接跳广告也不去登录
        this.$api.get(`ads/application/${this.data.id}`)
      }
      // alert(`idfa:${this.info.idfa}, source_app:${this.info.source_app}`)
      // 百度统计
      // window._hmt && window._hmt.push(['_trackEvent', this.appname, '申请', this.data.title])
      // window.location.href = this.data.url
      this.$router.push({ name: 'IFrame', params: {url: this.data.url} })
      // if (this.info.source_app.indexOf('com.') === -1) { // 若不在app内 即是网络推广页
      //   this.$router.push({ name: 'IFrame', params: {url: this.data.url} })
      //   window.ga && window.ga('send', 'event', '产品详情', 'click', this.data.title)
      // } else if (this.info.user_id !== '0') { // 若用户已登录
      //   this.$router.push({ name: 'IFrame', params: {url: this.data.url} })
      //   try {
      //     window.mobClickPars('ad_detail_num', this.data.title)
      //   } catch (e) {}
      // } else { // 若在app里且并未登录 则跳转到登录页面
      //   try {
      //     if (this.isIos) { // 判断是否是IOS
      //       if (this.info.source_app === 'com.chuangqi.moneybag') { // 临时修改 这个包直接跳广告也不去登录
      //         this.$router.push({ name: 'IFrame', params: {url: this.data.url} })
      //         return
      //       }
      //       window.sendUrl(this.data.url)
      //     } else {
      //       alert('sendUrl::' + this.data.url)
      //     }
      //   } catch (e) {}
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
.detail{
  padding-top: 10px;
  .ad-info{
    background: white;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .15);
    .ad-head{
      background: #ddf9ff;
      display: flex;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      border-bottom: 1px dashed #ccc;
      position: relative;
      .ad-credit{
        position: absolute;
        top: 20px;
        right: 15px;
        width: 55px;
        height: 43px;
        background: url('~@/assets/img/credit.png') no-repeat;
        background-size: 55px 43px;
      }
      .ad-image{
        flex-grow: 1;
        flex-basis: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }
      .ad-head-content{
        flex-grow: 3;
        flex-basis: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .ad-head-content-title{
          font-size: 17px;
        }
        .ad-head-content-success{
          color: #338baf;
        }
        .ad-head-content-ascendancy{
          color: #666;
        }
      }
    }
    .ad-footer{
      display: flex;
      padding: 15px 8px;
      & > div {
        flex-grow: 1;
        flex-basis: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        &:not(:last-child){
          border-right: 1px solid #eee;
        }
        .ad-footer-icon{
          padding-bottom: 5px;
          img {
            width: 28px;
            height: 28px;
          }
        }
        .ad-footer-title{
          font-size: 12px;
          font-weight: 100;
          margin-bottom: 5px;
        }
        .ad-footer-content{
          font-size: 18px;
          font-weight: 400;
          // text-overflow: ellipsis;
          // display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
          // -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          // -webkit-line-clamp: 1; /** 显示的行数 **/
          // overflow: hidden;  /** 隐藏超出的内容 **/
        }
      }
    }
  }
  .ad-desc {
    background: white;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .15);
    padding: 15px;
    .ad-desc-item{
      &:not(:last-child) {
        padding-bottom: 10px;
        border-bottom: 1px dashed #ccc;
      }
      &:not(:first-child) {
        padding-top: 10px;
      }
      .ad-desc-item-title {
        font-size: 18px;
        margin-bottom: 3px;
      }
      .ad-desc-item-content {
        font-size: 14px;
        color: #aaa;
        &:not(:last-child) {
          margin-bottom: 3px;
        }
      }
    }
  }
}
.button-box{
  margin-top: 20px;
}
.banner{
  margin: 0 5px;
  width: calc(100vw - 10px);
  img {
    width: 100%;
  }
}
</style>

